<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="../js/form.js" defer></script>
    <script src="../js/plotly-charts.js" defer></script>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="content.html">内容展示</a></li>
                <li><a href="visualize.html">数据可视化</a></li>
                <li><a href="user.html">用户管理</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>数据可视化</h1>
        <form id="dataForm">
            <input type="text" id="name" placeholder="姓名" required>
            <input type="number" id="age" placeholder="年龄" required>
            <input type="email" id="email" placeholder="邮箱" required>
            <input type="text" id="interest" placeholder="兴趣领域" required>
            <button type="submit">提交</button>
        </form>
        <input type="file" id="fileInput" accept=".csv">
        <div id="tableContainer"></div>
        <div id="lineChart"></div>
        <div id="pieChart"></div>
        <div id="scatter3dChart"></div>
    </main>
    <footer>
        <p>&copy; 线上教育管理平台</p>
        <p>联系方式: 1164432959@qq.com</p>
        <button id="backToTop">返回顶部</button>
    </footer>
    <script>
        document.getElementById('backToTop').addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    </script>
</body>
</html>
